<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>admin</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/jquery-3.6.0.js"></script>
    <style>
        .poem-table {
            margin-top: 100px;
        }
    </style>
</head>
<body>
<ul class="layui-nav" lay-filter="demo">
    <li class="layui-nav-item layui-this"><a href="/admin">控制台</a></li>
    <li class="layui-nav-item"><a href="/login">登录</a></li>
    <li class="layui-nav-item"><a href="">注册</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">个人中心</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="/edit_personal_information">修改个人信息</a></dd>
            <dd><a href="/login">退出</a></dd>
            <dd><a href="/view_personal_information">查看个人信息</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="/write_poem">我自己写诗</a></li>
</ul>
<table id="demo" lay-filter="demo" class="layui-table poem-table"></table>
<script type="text/html" id="bar_demo">
    <div>
        <button class="layui-btn layui-btn-sm" lay-event="detail">查看</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div></script>

<script src="/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , width: 1200
            , url: 'http://127.0.0.1:5000/poems' //数据接口
            , page: true //开启分页

            , toolbar: true
            , cols: [[ //表头

                {#,{field: 'sex', title: '性别', width:80, sort: true}#}
                {field: 'title', title: '标题', width: 360}
                , {field: 'author', title: '作者', width: 360}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#bar_demo', width: 480}
            ]]
        });

        table.on('tool(demo)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                layer.open(
                    {
                        type: 2,
                        content: 'http://localhost:5000/poem?name=' + data.title
                    }
                )
            } else if (layEvent === 'delete') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    $.ajax('http://localhost:5000/delete?name=' + data.title);
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
        });
    });
</script>

</body>
</html>